    <style include="shared-style">
      :host {
        display: flex;
        position: relative;
      }

      /* General toolbar layout. */

      cr-toolbar {
        --cr-toolbar-field-margin: var(--side-bar-width);
        flex: 1;
      }

      :host([has-drawer]) cr-toolbar,
      :host([has-drawer]) cr-toolbar-selection-overlay {
        --cr-toolbar-field-margin: 0;
      }

      cr-toolbar-selection-overlay {
        opacity: 0;
        --selection-overlay-max-width: var(--card-max-width);
        --cr-toolbar-field-margin: var(--side-bar-width);
      }

      cr-toolbar-selection-overlay[show] {
        opacity: 1;
      }
    </style>
    <cr-toolbar id="main-toolbar"
        has-overlay$="[[itemsSelected_]]"
        page-name="$i18n{title}"
        clear-label="$i18n{clearSearch}"
        search-prompt="$i18n{searchPrompt}"
        spinner-active="[[spinnerActive]]"
        autofocus
        show-menu="[[hasDrawer]]"
        menu-label="$i18n{historyMenuButton}"
        narrow-threshold="1023"
        on-search-changed="onSearchChanged_">
    </cr-toolbar>
    <cr-toolbar-selection-overlay show="[[itemsSelected_]]"
        delete-label="$i18n{delete}"
        cancel-label="$i18n{cancel}"
        delete-disabled="[[pendingDelete]]"
        selection-label="[[numberOfItemsSelected_(count)]]"
        on-clear-selected-items="clearSelectedItems"
        on-delete-selected-items="deleteSelectedItems">
    </cr-toolbar-selection-overlay>
